/**
 * 品类详情
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Input, Form } from 'antd';
import { Link } from 'dva/router';
import moment from 'moment';
import Table from '../productList/table';

const FormItem = Form.Item;

const styles = {
	back: {
		marginLeft: '1em'
	},
	bv: {
		paddingTop: '0 1em',
		textAlign: 'right',
		float: 'right'
	},
	input: {
		marginBottom: '1em',
		display: 'inline-block',
		width: '300px'
	},
	label: {
		fontSize: '14px',
		marginRight: '1em'
	},
	form: {
		fontSize: '14px',
		paddingTop: '1em',
		lineHeight: 2
	},
	edit: {
		display: 'inline-block',
		verticalAlign: 'top'
	},
	span: {
		marginLeft: '5em'
	}
};

const formItemLayout = {
	labelCol: {
		span: 6,
	},
	wrapperCol: {
		span: 18,
	},
	style: styles.input
};

class Detail extends Component {
	constructor(props, context) {
		super(props, context);
		this.state = {
			name: props.productType.currentItem.name
		};
	}

	componentWillMount() {
		const { productList, dispatch } = this.props;
		if (!productList || !productList.length) {
			dispatch({
				type: 'productList/query'
			});
		}
	}

	save = () => {
		// 保存数据
		const { dispatch, productType: { currentItem } } = this.props;
		const { error, name } = this.state;
		if (error) return;
		const data = {
			name,
			id: currentItem.id
		};
		const action = {
			type: 'productType/update',
			payload: data
		};
		dispatch(action);
	}

	change = e => {
		const { productType: { list, currentItem } } = this.props;
		const state = {
			name: e.target.value
		};
		state.error = list.find(t => t.name === state.name && t.id !== currentItem.id) ? '产品品类已存在' : null;
		state.error = !state.error && !state.name ? '请输入产品品类' : state.error;
		state.error = !state.error && !/^[\u4e00-\u9fa5a-zA-Z0-9]{1,30}$/.test(state.name) ? '最多输入30个字符，只能输入中文、数字或英文字母' : state.error;
		this.setState(state);
	}

	goToDetail = id => {
		const { history } = this.props;
		history.push(`/productList/${id}`);
	}

	render() {
		const { productType, productList } = this.props;
		const { currentItem } = productType;
		const { name, error } = this.state;
		console.log('productList', productList);
		const list = productList.filter(p => p.productCategoryName === currentItem.name);
		return (
			<div className="content-inner">
				<div>
					<h2>
						品类详情
						<div style={styles.bv}>
							<Button type="primary" onClick={this.save}>保存</Button>
							<Link to="/productType">
								<Button style={styles.back}>返回列表</Button>
							</Link>
						</div>
					</h2>
					<div style={styles.form}>
						<div>
							<FormItem label="产品品类" hasFeedback {...formItemLayout} required help={error} validateStatus={error ? 'error' : null}>
								<Input onChange={this.change} value={name} />
							</FormItem>
							<span style={styles.span}>产品数量：{currentItem.productCount}</span>
							<span style={styles.span}>创建时间：{moment(currentItem.ctime).format('YYYY-MM-DD HH:mm:ss')}</span>
							<span style={styles.span}>修改时间：{moment(currentItem.utime).format('YYYY-MM-DD HH:mm:ss')}</span>
						</div>
					</div>
				</div>
				<Table
					list={list}
					select={this.onSelect}
					edit={this.goToDetail}
					notShow={['productCategoryName']}
				/>
			</div>
		);
	}
}

Detail.propTypes = {

};

export default connect(({ productType, productList }) => ({ productType, productList: productList.list }))(Detail);
